<template>
  <div class="nb">
    <el-input type="textarea" v-model="text" v-bind="attrs"/>
    <div class="nb__limit" v-if="showWordLimit">
      {{ wordCount }}/{{ maxlength }}
    </div>
  </div>
</template>

<script>
import StrUtil from "@/utils/StrUtil";

export default {
  name: 'NbTextArea',
  props: {
    value: String,
    showWordLimit: {
      type: Boolean,
      default: true
    },
    maxlength: {
      type: Number
    }
  },
  watch: {
    value() {
      this.text = this.value || ''
    },
    text() {
      this.$emit('input', this.text.trim())
    }
  },
  computed: {
    attrs() {
      return Object.assign(this.$attrs, {
        showWordLimit: false,
        maxlength: this.maxlength + this.text.length - this.wordCount
      })
    },
    wordCount() {
      return StrUtil.fLenB(this.text)
    }
  },
  data() {
    return {
      text: this.value
    }
  }
}
</script>

<style scoped lang="scss">
.nb {
  position: relative;

  &__limit {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    color: #999;
  }
}
</style>
